<template>
  <div class="wrap">
    <h1 class="title">公告栏</h1>

   <el-space :wrap="true" :size="20" class="showList">
    <template v-for="item in noticeList" :key="item">
      <NoticeSolt :time="item.noticeTime" :title="`${item.noticePerson}-发的公告 `" v-model:showDetials="showDetials" :containt="item.noticeContent"/>
    </template>
  </el-space>
 	<el-row class="pagination">
			<el-pagination
				v-model:current-page="currentPage"
				v-model:page-size="pageSize"
				:page-sizes="pageSizes"
				small="small"
				:background="true"
				layout="total,size, prev, pager, next"
				:total="total"
				@size-change="handelPageSizeChange"
				@current-change="handleCurrentChange" />
		</el-row>
  </div>
</template>

<script setup>
import NoticeSolt from '@/components/mod/NoticeSolt.vue';
import { onMounted, ref } from 'vue';
import { getNoticeList } from '@/utils/axios/stuReqest';
import { getNoticeOneBuild } from '@/utils/axios/getTotal';
import { useUserStore } from '@/stores/userStore';

const {userInfo}=useUserStore()
// 公告列表
const noticeList=ref([])

const showDetials=ref(false)

// 分页
const pageSizes=ref([10,20,30])
const currentPage = ref(1)
const pageSize = ref(10)
const total=ref(0)

// 处理当前页变化
const handleCurrentChange = async (val) => {
	let { data } = await getNoticeList({ currentPage: val ,pageSize:pageSize.value})
	noticeList.value=data
}

const handelPageSizeChange= async(val)=>{
	let { data } = await getNoticeList({ currentPage: currentPage.value ,pageSize:val})
	noticeList.value=data
}


onMounted(async()=>{
  let {data}=await getNoticeList({currentPage: currentPage.value ,pageSize:pageSize.value})
  let res =await getNoticeOneBuild({buildId:userInfo.buildId})
  noticeList.value=data
  total.value=res.data
})

</script>

<style scoped lang="scss">
.showList{
  margin-top: 20px;
}

</style>

